<template>
    <div>
        <section v-show="!showdetail">
            <div class="operation">
                <a class="btn btn-theme" @click="showAddEMModal">添加员工</a>
                <a class="btn btn-theme" @click="showAddPass">添加登录权限</a>
                <a class="btn btn-theme" @click="deleteEM">删除员工</a>
            </div>
            <table class="table"></table>
        </section>
        <div class="modal fade" id="employee_add_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">添加员工</h4>
                                </div>
                                <div class="modal-body">
                                    <form>
                                        <div class="form-group">
                                            <label for="usernamenew" class="control-label">用户名</label>
                                            <input type="text" class="form-control" id="usernamenew">
                                        </div>
                                        <div class="form-group">
                                            <label for="loginnamenew" class="control-label">登录名</label>
                                            <input type="text" class="form-control" id="loginnamenew">
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary" @click="addEM" id="employee_add_submit">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal fade" id="add_login_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="exampleModalLabel">添加密码</h4>
                                </div>
                                <div class="modal-body">
                                    <form>

                                        <div class="form-group">
                                            <label for="add_pass1" class="control-label">登录密码：</label>
                                            <input type="password" class="form-control" id="add_pass1">
                                        </div>
                                        <div class="form-group">
                                            <label for="add_pass2" class="control-label">确认密码：</label>
                                            <input type="password" class="form-control" id="add_pass2">
                                        </div>


                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" @click="addPass" id="add_login_submit">提交</button>
                                </div>
                            </div>
                        </div>
                    </div>
        <section class="container-fluid" v-if="showdetail" style="padding-top:20px; margin:0 15px;" id="employee_detail_container">
                <div class="row">
                    <form>
                        <div class="container-fluid col-md-12">
                            <div class="row" style="padding:10px;border-radius:10px;background-color:#fbfbfb">
                                <div class="form-group col-md-2 hidden">
                                    <label for="password" class="control-label">密码</label>
                                    <input type="pass" class="form-control" id="password">
                                </div>
                                <div class="form-group col-md-2 hidden">
                                    <label for="salt" class="control-label">密码2</label>
                                    <input type="text" class="form-control" id="salt">
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="loginname" class="control-label">登录名</label>
                                    <input type="text" class="form-control" id="loginname">
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="username" class="control-label">用户名</label>
                                    <input type="text" class="form-control" id="username">
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="email" class="control-label">邮箱</label>
                                    <input type="text" class="form-control" id="email">
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="mobile" class="control-label">手机号</label>
                                    <input type="text" class="form-control" id="mobile">
                                </div>

                                <div class="form-group col-md-2">
                                    <label for="dept" class="control-label">部门</label>
                                    <select type="text" class="form-control" id="dept"></select>
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="fcompanyid" class="control-label">所属公司</label>
                                    <select type="text" class="form-control" id="fcompanyid">
                                        <option value="4">美嘉</option>
                                        <option value="16">美冠</option>
                                        <option value="18">医疗</option>
                                    </select>
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="lastlogintime" class="control-label">上次登陆日期</label>
                                    <input type="text" class="form-control" id="lastlogintime">
                                </div>
                                <div class="form-group col-md-2 ">
                                    <label for="age" class="control-label">年龄</label>
                                    <input type="text" class="form-control" id="age">
                                </div>
                                <div class="form-group col-md-2" style="height:89px;padding:25px">
                                    <label for="fenable" class="control-label">是否允许登陆</label>
                                    <input type="checkbox" value="true" id="fenable" name="fenable">
                                </div>
                                <div class="form-group col-md-2" style="height:89px;padding:25px">
                                    <label for="sex" class="control-label">性别</label>
                                    <input type="radio" name="sex" id="male" value="1">男
                                    <input type="radio" name="sex" id="female" value="0">女
                                </div>
                                <div class="form-group col-md-2" style="height:88.44px;padding:25px">
                                    <label for="status" class="control-label">是否在职</label>
                                    <input type="checkbox" value="true" id="status">
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="indate" class="control-label">入职时间</label>
                                    <input type="date" class="form-control" id="indate">
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="outdate" class="control-label">离职时间</label>
                                    <input type="date" class="form-control" id="outdate">
                                </div>
                                <div class="form-group col-md-2 hidden">
                                    <label for="ethnic" class="control-label">民族</label>
                                    <input type="text" class="form-control" id="ethnic">
                                </div>
                                <div class="form-group col-md-2" style="height:89px;padding:25px">
                                    <label for="isss" class="control-label">是否交社保</label>
                                    <input type="checkbox" value='true' id="isss">
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="sscode" class="control-label">社保编号</label>
                                    <input type="text" class="form-control" id="sscode">
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="ssdate" class="control-label">交社保时间</label>
                                    <input type="date" class="form-control" id="ssdate">
                                </div>
                                <div class="form-group col-md-2" style="height:89px;padding:25px">
                                    <label for="isgjj" class="control-label">是否交公积金</label>
                                    <input type="checkbox" value="true" id="isgjj">
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="gjjcode" class="control-label">公积金编号</label>
                                    <input type="text" class="form-control" id="gjjcode">
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="gjjdate" class="control-label">交公积金时间</label>
                                    <input type="date" class="form-control" id="gjjdate">
                                </div>
                                <div class="form-group col-md-2">
                                    <label for="fuid4" class="control-label">是否有居住证</label>
                                    <select type="text" class="form-control" id="fuid4">
                                        <option value="无">无</option>
                                        <option value="有">有</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>

                <div class="pull-right">
                    <a id="save" name="employee_save" class="btn btn-theme" @click="save">保存</a>
                    <a id="cancel" class="btn btn-theme" @click="changeShowDetail">返回</a>
                </div>
        </section>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                showdetail: false,
                tabledata: '',
                currentId: ''
            }
        },
        methods: {
            getTable() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/scaccount/fetchList',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'extra.selectfield': '*',
                        'extra.sortfield': 'fidno',
                        'extra.pagesize': 9999999,
                        'extra.pageindex': 1,
                    },
                    dataType: 'json',
                    crossDomain: true,
                    async: false,
                    error(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success(res) {
                        _this.tabledata = res.Table2
                    }
                });
                var operateEvent = {
                    'click a[name="employee"]': function(e, value, row, index) {
                        _this.showdetail = true
                        _this.currentId = row.fidno
                        $.ajax({
                            type: 'POST',
                            url: 'http://192.168.1.66:808/api/dept/fetchallList',
                            data: {
                                'token': localStorage.token,
                                'userid': localStorage.userid,
                            },
                            dataType: 'json',
                            crossDomain: true,
                            error: function(request) {
                                _this.$store.commit('showModal','连接错误')
                            },
                            success: function(retdata) {
                                var htmlcont = '';
                                for (var i = 0; i < retdata.Table2.length; i++) {
                                    htmlcont = htmlcont + '<option value="' + retdata.Table2[i].fidno + '">' + retdata.Table2[i].fdname + '</option>';
                                }
                                $('#dept').html(htmlcont);
                            }
                        });
                        $.ajax({
                            type: 'POST',
                            url: 'http://192.168.1.66:808/api/scaccount/fetchlistbyid',
                            data: {
                                'token': localStorage.token,
                                'userid': localStorage.userid,
                                'fidno': row.fidno,
                                'fteamid': localStorage.activeteamid
                            },
                            dataType: 'json',
                            crossDomain: true,
                            error: function(request) {
                                _this.$store.commit('showModal','连接错误')
                            },
                            success: function(retdata) {
                                $('#password').val(retdata.Table2[0].userpassword);
                                $('#salt').val(retdata.Table2[0].fsalt);
                                $('#loginname').val(retdata.Table2[0].loginname);
                                $('#username').val(retdata.Table2[0].username);
                                $('#email').val(retdata.Table2[0].email);
                                $('#mobile').val(retdata.Table2[0].mobile);
                                $('#dept').val(retdata.Table2[0].userdeptid);
                                $('#fcompanyid').val(retdata.Table2[0].fcompanyid);
                                //$('#team').val(retdata.Table2[0].fteamid);
                                $('#firstlogin').val(retdata.Table2[0].firstlogin);
                                $('#lastlogintime').val(retdata.Table2[0].flastlogintime);
                                if (retdata.Table2[0].fenable == true) {
                                    $('#fenable').prop('checked', true);
                                } else {
                                    $('#fenable').prop('checked', false);
                                }

                                if (retdata.Table2[0].fsex == true) {
                                    $('#male').prop('checked', true);
                                    $('#female').prop('checked', false);
                                } else {
                                    $('#male').prop('checked', false);
                                    $('#female').prop('checked', true);
                                }

                                $('#age').val(retdata.Table2[0].fage);
                                $('#ethnic').val(retdata.Table2[0].fethnic);
                                if (retdata.Table2[0].fisss == true) {
                                    $('#isss').prop('checked', true);
                                } else {
                                    $('#isss').prop('checked', false);
                                }

                                $('#sscode').val(retdata.Table2[0].fissscode);
                                if (retdata.Table2[0].fisgjj == true) {
                                    $('#isgjj').prop('checked', true);
                                } else {
                                    $('#isgjj').prop('checked', false);
                                }

                                $('#gjjcode').val(retdata.Table2[0].fgjjcode);
                                $('#gjjdate').val(retdata.Table2[0].fgjjbegindate);
                                $('#ssdate').val(retdata.Table2[0].fssbegindate);
                                $('#indate').val(retdata.Table2[0].fworktime);
                                $('#outdate').val(retdata.Table2[0].fleavetime);
                                if (retdata.Table2[0].fstatus == true) {
                                    $('#status').prop('checked', true);
                                } else {
                                    $('#status').prop('checked', false);
                                }
                            }
                        });
                    }
                }
                $('.table').bootstrapTable('destroy')
                $('.table').bootstrapTable({
                    columns: [{
                        radio: true
                    }, {
                        field: 'fidno',
                        title: '员工号',
                        // align: 'center',
                        halign: 'center',
                    }, {
                        field: 'username',
                        title: '姓名',
                        halign: 'center',
                    }, {
                        field: 'deptname',
                        title: '部门',
                        halign: 'center'
                    }, {
                        field: 'ftitle',
                        title: '团队',
                        halign: 'center'
                    }, {
                        field: 'fenable',
                        title: '是否可登陆',
                        halign: 'center'
                    }, {
                        field: 'opeation',
                        title: '操作',
                        halign: 'center',
                        events: operateEvent,
                        formatter: '<a class="btn btn-theme btn-sm" name="employee">查看详情</a>'
                    }],

                    data: this.tabledata,
                    search: true,
                    searchOnEnterKey: false,
                    strictSearch: false,
                    striped: true,
                    pagination: true,
                    selectItemName: 'dept',
                    sidePagination: 'client',
                    pageNumber: 1,
                    pageSize: 10,
                    pageList: [10, 20, 50],
                    clickToSelect: true
                })
            },
            showAddEMModal() {
                $('#employee_add_modal').modal('show')
            },
            addEM() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/scaccount/add',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'loginname': $('#loginnamenew').val(),
                        'username': $('#usernamenew').val(),
                        'fteamid': localStorage.activeteamid
                    },
                    dataType: 'json',
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        $('#employee_add_modal').modal('hide')
                        _this.getTable()
                    }
                });
            },
            showAddPass() {
                $('#add_login_modal').modal('show');
            },
            addPass() {
                var _this = this
                if ($('#add_pass1').val() != $('#add_pass2').val()) {
                    _this.$store.commit('showModal',两次输入的密码不一致)
                   
                } else {
                    $.ajax({
                        type: 'POST',
                        url: 'http://192.168.1.66:808/api/user/addpassword',
                        data: {
                            'token': localStorage.token,
                            'userid': localStorage.userid,
                            'fidno': $('.selected').children().eq(1).text(),
                            'fteamid': localStorage.activeteamid,
                            'userpassword': $('#add_pass1').val(),
                            'loginname': $('.selected').children().eq(3).text(),
                        },
                        dataType: 'json',
                        crossDomain: true,
                        error: function() {

                        },
                        success: function(retdata) {
                            if (retdata.Table1[0].status == true) {
                                $('#add_login_modal').modal('hide');
                                _this.getTable()
                            }
                        }
                    });
                }
            },
            deleteEM() {
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/scaccount/delList',
                    data: {
                        'token': localStorage.token,
                        'userid': localStorage.userid,
                        'poststring': $('.selected').children().eq(1).text(),
                    },
                    dataType: 'json',
                    crossDomain: true,
                    error: function(request) {
                        _this.$store.commit('showModal','连接错误')
                    },
                    success: function(retdata) {
                        _this.getTable()
                    }
                });
            },
            changeShowDetail() {
                this.showdetail = false
            },
            save() {
                var datajson = {
                    'token': localStorage.token,
                    'userid': localStorage.userid,
                    'userpassword': $('#password').val(),
                    'fsalt': $('#salt').val(),
                    'fidno': this.currentId,
                    'loginname': $('#loginname').val(),
                    'username': $('#username').val(),
                    'email': $('#email').val(),
                    'fcompanyid': $('#fcompanyid').val(),
                    'mobile': $('#mobile').val(),
                    'userdeptid': $('#dept').val(),
                    'flastlogintime': $('#lastlogintime').val(),
                    'fenable': $('#fenable').prop('checked'),
                    'fsex': $('input[name="sex"]').prop('checked'),
                    'fage': $('#age').val(),
                    'fethnic': $('#ethnic').val(),
                    'fisss': $('#isss').prop('checked'),
                    'fissscode': $('#sscode').val(),
                    'fisgjj': $('#isgjj').prop('checked'),
                    'fgjjcode': $('#gjjcode').val(),
                    'fgjjbegindate': $('#gjjdate').val().replace('/', '-'),
                    'fssbegindate': $('#ssdate').val().replace('/', '-'),
                    'fworktime': $('#indate').val().replace('/', '-'),
                    'fleavetime': $('#outdate').val().replace('/', '-'),
                    'fstatus': $('#status').prop('checked'),
                    'fuid4': $('#fuid4').val()
                };
                var _this = this
                $.ajax({
                    type: 'POST',
                    url: 'http://192.168.1.66:808/api/scaccount/update',
                    data: datajson,
                    dataType: 'json',
                    async: false,
                    crossDomain: true,
                    error: function() {

                    },
                    success: function(retdata) {
                        _this.showdetail = false
                        _this.getTable()
                    }
                });
            }
        },
        mounted() {
            this.getTable()
        }
    }
</script>
<style>

</style>